import React from 'react'
import { Card, Typography, Tag, Space } from 'antd'
import { UserOutlined, CrownOutlined } from '@ant-design/icons'
import { getCurrentUsername, getCurrentRoleName, isAdmin } from '../utils/auth'

const { Text, Title } = Typography

/**
 * 用户信息展示组件
 * 显示当前登录用户的基本信息
 */
const UserInfo: React.FC = () => {
  const username = getCurrentUsername()
  const roleName = getCurrentRoleName()
  const isAdminUser = isAdmin()

  if (!username) {
    return null
  }

  return (
    <Card 
      size="small"
      style={{
        position: 'absolute',
        top: '20px',
        left: '20px',
        zIndex: 1000,
        minWidth: '180px',
        maxWidth: '250px',
        background: 'rgba(255, 255, 255, 0.95)',
        backdropFilter: 'blur(10px)',
        borderRadius: '12px',
        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
        transition: 'all 0.3s ease'
      }}
      bodyStyle={{ padding: '12px 16px' }}
    >
      <Space direction="vertical" size="small" style={{ width: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          {isAdminUser ? (
            <CrownOutlined style={{ color: '#faad14', fontSize: '16px' }} />
          ) : (
            <UserOutlined style={{ color: '#1890ff', fontSize: '16px' }} />
          )}
          <Title level={5} style={{ margin: 0, fontSize: '14px' }}>
            {username}
          </Title>
        </div>
        
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Tag 
            color={isAdminUser ? 'gold' : 'blue'}
            style={{ margin: 0, fontSize: '12px' }}
          >
            {roleName}
          </Tag>
        </div>
      </Space>
    </Card>
  )
}

export default UserInfo
